<!DOCTYPE html>
<html>
<#import "/spring.ftl" as sp />
<#assign base=request.contextPath />

<head lang="zh-CN">
    <meta charset="UTF-8">
    <base id="base" href="${base}">
    <link rel="stylesheet" href="${base}/plugin/editor/css/editormd.css" />
    <title>你好,editor</title>
</head>

<body>

<div id="layout">
    <header>
        <h1>Simple example</h1>
    </header>
    <div id="test-editormd">
                <textarea style="display:none;">[TOC]

#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/
            editormd.js
            ...

```html
                    &lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
```
</textarea>
    </div>
</div>
<script src="${base}/plugin/jquery/jquery.min.js"></script>
<script src="${base}/plugin/editor/editormd.min.js"></script>

<script type="text/javascript">
    var testEditor;

    $(function() {
        testEditor = editormd("test-editormd", {
            width   : "90%",
            height  : 640,
            syncScrolling : "single",
            path    : "${base}/plugin/editor/lib/",
            imageUpload:true,
            imageUploadURL:"${base}/upload/editormd-image-file",
            flowChart:true,
            sequenceDiagram:true
        });

        /*
        // or
        testEditor = editormd({
            id      : "test-editormd",
            width   : "90%",
            height  : 640,
            path    : "../lib/"
        });
        */
    });
</script>

</body>
</html>